<template>
	<div class="app-container">
		<div class="flex flex-wrap">
			<div class="flex items-center marginRB10">
				<span class="w-30 text-right">用户ID：</span>
				<el-input v-model="listQuery.user_id" clearable placeholder="请输入用户ID" style="width: 220px;"></el-input>
            </div>
			
			<div class="flex items-center marginRB10">
				<span class="w-30 text-right">用户昵称：</span>
				<el-input v-model="listQuery.nickname" clearable placeholder="请输入用户昵称" style="width: 220px;"></el-input>
            </div>
            <div class="flex items-center marginRB10">
				<span class="w-30 text-right">卡片ID：</span>
				<el-input v-model="listQuery.id" clearable placeholder="请输入卡片ID" style="width: 220px;"></el-input>
            </div>
			<div class="flex items-center marginRB10">
				<el-button type="primary" size="default" @click="getList();listQuery.page = 1;">查 询</el-button>
				<el-button size="default" @click="handleReset" plain>重 置</el-button>
            </div>
		</div>

		<el-table :data="tableData" border stripe>
			<el-table-column v-for="col in columns"
				:prop="col.property"
				:key="col.id"
				:label="col.label"
				:width="col.width"
				:sortable="col.property === 'time'">
				<template slot-scope="scope">
					<span v-if="col.property === 'avatar'">
                        <el-image :src="scope.row[col.property]" fit="fill" :lazy="true" class="rounded-full h-32 w-32 text-base">
							<div slot="error" class="image-slot"></div>
						</el-image>
					</span>
					<span v-else-if="col.property === 'pictures'">
						<div v-for="(item, index) in scope.row[col.property]" :key="index" style="margin-right: 5px;display: inline-block;">
							<el-image
								style="width: 100px; height: 100px;"
								:src="item"
								:preview-src-list="scope.row['srcList']">
								<div slot="error" class="image-slot"></div>
							</el-image>
						</div>
					</span>
                    <span v-else-if="col.property === 'content'">
                        <span class="overflow-ellipsis" :class="scope.row.isEllipsis ? 'textLength' : ''">{{scope.row[col.property]}}</span>
                        <span v-if="scope.row.isEllipsis" @click="scope.row.isEllipsis = !scope.row.isEllipsis" class="text-blue-500 cursor-pointer">展开</span>
                        <span v-if="!scope.row.isEllipsis" @click="scope.row.isEllipsis = !scope.row.isEllipsis" class="text-blue-500 cursor-pointer">收起</span>
					</span>
                    <span v-else-if="col.property === 'voice'">
						<audio :id="'audio' + scope.$index" :src="scope.row[col.property]" controls class="w-72"></audio>
					</span>
					<span v-else>{{scope.row[col.property]}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button @click="handleCheck(scope.row)" type="text" size="small">编辑</el-button>
					<el-button @click="handleDelete(scope.row)" type="text" style="color: #f56c6c;" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<cus-pagination v-show="total>0" :limit.sync="listQuery.perPage" :page.sync="listQuery.page" :total="total" @pagination="getList" />
		

		<!-- 编辑 -->
		<el-dialog
			title="编辑"
			:visible.sync="detailDialogVisible"
			width="30%"
			@close="handleCloseDialog">
			<div class="flex items-center mb-4">
                <span class="w-32 text-right">用户头像：</span>
                <el-image :src="cardInfo.avatar" fit="fill" :lazy="true" class="rounded-full h-24 w-24" style="font-size: 32px;display: flex;align-items: center;justify-content: center;">
					<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
				</el-image>
            </div>
            <div class="flex items-center mb-4">
                <span class="w-32 text-right">用户昵称：</span>
                <span>{{cardInfo.nickname}}</span>
            </div>
            <div class="flex items-center mb-4">
                <span class="w-32 text-right">用户ID：</span>
                <span>{{cardInfo.user_id}}</span>
            </div>
            <div class="flex items-center mb-4">
                <span class="w-32 text-right">卡片ID：</span>
                <span>{{cardInfo.id}}</span>
            </div>
            <div class="flex mb-4">
                <span class="w-32 text-right">个人喜好：</span>
				<div class="relative max-w-xs">
                	<span>{{cardInfo.introduction}}</span>
					<div class="deleteIcon" @click="handleDeleteFun1"><i class="el-icon-close"></i></div>
				</div>
            </div>
            <div class="flex items-center mb-4">
                <span class="w-32 text-right">语音介绍：</span>
				<div class="relative">
					<audio :src="cardInfo.voice" controls class="w-72"></audio>
					<div class="deleteIcon" @click="handleDeleteFun2"><i class="el-icon-close"></i></div>
				</div>
            </div>
            <div class="flex mb-4">
                <span class="w-32 text-right">照片展示：</span>
                <div class="w-3/5" v-if="cardInfo.pictures[0]">
                    <div class="mr-8 mb-8 relative showDel" v-for="(item, index) in cardInfo.pictures" :key="index" style="display: inline-block;">
						<el-image
							style="width: 100px; height: 100px;"
							:src="item" 
							:preview-src-list="cardInfo.srcList">
							<div slot="error" class="image-slot"></div>
						</el-image>
						<div class="deleteStyle" @click="handleDeleteFun(index)">删除</div>
					</div>
                </div>
            </div>
			
			<span slot="footer">
				<el-button @click="detailDialogVisible = false">返回</el-button>
				<el-button type="primary" @click="handleModification">修改</el-button>
                
			</span>
		</el-dialog>
		
		
	</div>
</template>

<script>
import {
  friendCardList,
  friendCardModification
} from '@/api/groupChat/loveLineCardList'
import qs from 'qs'
export default {
	name: 'loveLineCardList',
	data() {
		return {
			detailDialogVisible: false,
			total: 0,
			listQuery: {
				page: 1,
				perPage: 10
			},
			tableData: [],
			columns: [
				{
					id: 1,
					label: '用户头像',
					property: 'avatar',
					width: 'auto'
				},
				{
					id: 2,
					label: '用户昵称',
					property: 'nickname',
					width: 'auto'
				},
				{
					id: 3,
					label: '用户ID',
					property: 'user_code',
					width: '200'
				},
				{
					id: 4,
					label: '卡片ID',
					property: 'id',
					width: 'auto'
				},
				{
					id: 5,
					label: '个人喜好',
					property: 'introduction',
					width: 'auto'
				},
				{
					id: 6,
					label: '语音介绍',
					property: 'voice',
					width: 'auto'
				},
				{
					id: 7,
					label: '照片展示',
					property: 'pictures',
					width: 'auto'
				}
			],
			card_id: '',
			cardInfo: {
				pictures: []
			},
			imgList: []
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		getList() {
			this.listLoading = true
			for (let key in this.listQuery) {
				this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
			}
			friendCardList(this.listQuery, 'get').then(({ data }) => {
				data.list.map((item) => {
					item.srcList = []
					item.pictures.map(elem => {
						item.srcList.push(elem)
					})
					item.user_code = item.user.user_code
				})
				this.tableData = data.list
				this.total = data.meta.total
				this.listLoading = false
				this.confirmBtn = false
			})
		},
		deleteFriendCardList(data, method) {
			friendCardList(data, method).then(res => {
				if(res.code === 200) {
					this.$message({
						type: 'success',
						message: '操作成功'
					})
					this.detailDialogVisible = false
					this.getList()
				}
			})
		},
		friendCardModification() {
			let formData = {
				introduction: this.cardInfo.introduction ? this.cardInfo.introduction : qs.stringify(''),
				voice: this.cardInfo.voice,
				pictures: this.cardInfo.pictures.toString(),
				id: this.cardInfo.id
			}
			friendCardModification(formData).then(({code}) => {
				if(code === 200) {
					this.$message({
						type: 'success',
						message: '操作成功'
					})
					this.detailDialogVisible = false
					this.getList()
				}
			})
		},
		handleCheck(row) {
			this.card_id = row.id
			friendCardList({
				card_id: this.card_id
			}, 'get').then(({data,code}) => {
				if(code === 200) {
					data.srcList = []
					data.pictures.forEach(element => {
						data.srcList.push(element)
					})
					this.cardInfo = data
				}
			})
			this.detailDialogVisible = true
		},
		handleModification() {
			this.friendCardModification()
		},
        handleDelete(row) {
            this.$confirm('<p style="font-size: 16px;"><span class="el-icon-question" style="padding-right: 5px;color: #FF9900;font-size: 16px;"></span>确定删除？<p style="color: #606266;font-size: 14px;margin-left: 20px;">是否删除该卡片全部信息？</p></p>', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose: false,
                dangerouslyUseHTMLString: true
            }).then(() => {
                this.deleteFriendCardList({
					card_id: row.id
				},'delete')
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })
            })
        },
		handleSearch() {
            this.listQuery = {
				page: 1,
				perPage: 10
			}
        },
		handleReset() {
			this.listQuery = {
				page: 1,
				perPage: 10
			}
			this.getList()
        },
		handleCloseDialog() {
			
		},
		handleDeleteFun(index) {
			this.cardInfo.pictures.splice(index, 1)
		},
		handleDeleteFun1() {
			this.cardInfo.introduction = ''
		},
		handleDeleteFun2(info) {
			this.cardInfo.voice = ''
		}
	},
}
</script>

<style lang="scss" scoped>
.textLength{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /*3表示只显示3行*/
    /* autoprefixer: off */ 
    -webkit-box-orient: vertical;
}
.deleteStyle{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba($color: #000000, $alpha: .6);
	color: #fff;
}
.showDel:hover{

	.deleteStyle{
		display: flex;
		cursor: pointer;
	}
}
.deleteIcon{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	top: 0px;
	right: -27px;
	border: 1px solid #666;
	border-radius: 100%;
	z-index: 2;
	color: #666;
	font-size: 18px;
	cursor: pointer;
}
</style>